<template>
<div>
	<el-card class="page">
		<div slot="header" class="header">
		    <h2>新增配送费模板</h2>
		</div>
		<el-form ref="form" :model="form" :rules="rules" label-suffix=":" label-position="right" label-width="100px">
			<el-row :gutter="80">
				<el-col :span="12" style="height: 62px;">
					<el-form-item label="模板名称" prop="template_name">
						<el-input
						v-model="form.template_name"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12" style="height: 62px;">
					<el-form-item label="地址类型" prop="template_type">
						<el-radio-group v-model="form.template_type">
						    <el-radio v-for="(item, index) in site_modes" :key="item" :label="index + 1">{{ item }}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12" style="height: 62px;">
					<el-form-item label="默认运费" prop="price">
						<el-input-number
							style="width: 30%;"
							v-model="form.price"
							:controls="false"
							step-strictly
							:step="0.01"
							:min="0"
						/>
						/元
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="条件判断" prop="template_item">
						<el-table :data="form.template_item" stripe>
							<el-table-column label="地址类型" align="center" min-width="11%">
								<template slot-scope="scope">
									<el-select
									 v-model="scope.row.site_mode"
									 clearable
									 filterable
									>
									  <el-option
									   v-for="(item, index) in site_modes"
									   :key="item"
									   :label="item"
									   :value="index + 1"
									  /> 
									</el-select>
								</template>
							</el-table-column>
							<el-table-column label="计件条件" align="center" min-width="16%">
								<template slot-scope="scope">
									<el-select
									 v-model="scope.row.invoice_mode"
									 clearable
									 filterable
									>
									  <el-option
									   v-for="(item, index) in invoice_modes"
									   :key="item"
									   :label="item"
									   :value="index + 1"
									  /> 
									</el-select>
								</template>
							</el-table-column>
							<el-table-column label="判断条件" align="center" min-width="26%">
								<template slot-scope="scope">
									<el-input v-if="scope.row.invoice_mode === 2 || scope.row.invoice_mode === 3" placeholder="请输入内容" v-model="scope.row.number" class="input-with-select">
										<el-select v-model="scope.row.judge_number_mode" slot="prepend" placeholder="请选择">
										  <el-option
											v-for="(item, index) in judge_modes"
											:key="item" 
											:label="item" 
											:value="index + 1" />
										</el-select>
										<span slot="append">件</span>
									 </el-input>
		                             <div style="height: 10px;"></div>
									 <el-input v-if="scope.row.invoice_mode === 1 || scope.row.invoice_mode === 3" placeholder="请输入内容" v-model="scope.row.money" class="input-with-select">
										<el-select v-model="scope.row.judge_mode" slot="prepend" placeholder="请选择">
										  <el-option
										    v-for="(item, index) in judge_modes"
											:key="item" 
											:label="item" 
											:value="index + 1" />
										</el-select>
										<span slot="append">元</span>
									  </el-input>
								</template>
							</el-table-column>
							<el-table-column label="是否免运费" align="center" min-width="18%">
								<template slot-scope="scope">
									<el-radio-group v-model="scope.row.is_free">
									    <el-radio 
										v-for="(item, index) in is_frees" 
										:key="item" 
										:label="index + 1">{{ item }}</el-radio>
									</el-radio-group>
								</template>
							</el-table-column>
							<el-table-column label="配送费" align="center" min-width="14%">
								<template slot-scope="scope">
									<el-input-number
										style="width: 60%;"
										v-model="scope.row.template_fee"
										:controls="false"
										step-strictly
										:step="0.01"
										:min="0"
									/>
									 /元
								</template>
							</el-table-column>
							<el-table-column label="操作" align="center" min-width="15%">
								<template slot-scope="scope">
									<el-button type="danger" icon="el-icon-delete" circle @click="()=>{
										form.template_item.splice(scope.$index, 1)
									}"></el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="适用商品">
						
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-button type="info">编辑</el-button>
				</el-col>
			</el-row>
		</el-form>
		<div class="info">
			<div style="width: 50%;">
				已指定商品：{{ all_data_num }}
			</div>
			<div style="width: 50%;">
				<el-input
				 style="width: 40%;"
				 v-model="params.keywords"
				 placeholder="输入商品关键词"
				/>	
				<el-button icon="el-icon-search" @click="searchData"/>
			</div>
		</div>	
		<el-table
		 v-loading="tableLoading"
		 :data="tableData"
		 stripe
		 :show-header="false"
		>
		    <el-table-column
			  type="index"
			  min-width="6%"
			  >
			</el-table-column>
			<el-table-column min-width="30%">
				<template slot-scope="scope">
					  <img 
					  :src="configUrl + scope.row.goods_img" 
					  alt="" 
					  height="100px" 
					  width="100px">
					  <div style="height: 120px; display: inline-block; float: right; margin-right: 50px;">
						  <p>商品编号: {{ scope.row.goods_sku }}</p>
						  <p> {{ scope.row.goods_name }}</p>
					  </div>
				</template>
			</el-table-column>
			<el-table-column min-width="32%" align="center">
				<template slot-scope="scope">
					<p> {{ scope.row.cate_name }}</p>
				</template>
			</el-table-column>
			<el-table-column min-width="32%" align="center">
				<template slot-scope="scope">
					<el-button 
					icon="el-icon-delete" 
					type="danger" 
					@click="()=>{
					   tableData.splice(scope.$index, 1)
					}">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<footer>
			<el-pagination
			  background
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="params.page_num"
			  :page-sizes="[10, 20, 50, 100]"
			  :page-size="params.page_size"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="all_data_num">
			</el-pagination>
		</footer>
	</el-card>
   <div style="height: 70px;"/>
	<div class="submit-bar">
		<el-button type="info" @click="back">返回</el-button>
		<el-button type="primary" style="margin: 0 50px;" @click="baocun">保存并返回</el-button>
    </div>
</div>
</template>

<script>
import { getTemplateInfo, getTemplateGoods, saveTemplate } from '@/api/peisongfei'
import { pageMixin } from '@/components/PageMixin/index'
import { options } from '../options'
	
export default {
	mixins: [ options, pageMixin ],
	data() {
		return {
			form:{
				price: 0,
				template_id: 0,
				template_item: [],
				template_name: "",
				template_type: 1
			},
			
			rules:{
				template_name: [
					{ required: true, message: '请输入', trigger: 'blur' },
				],
				template_item: [
					{ type: 'array', required: true, message: '请输入', trigger: 'blur' },
				]
			},
			
			params:{
				template_id: 0,
				keywords: '',
				page_num: 1,
				page_size: 10
			},
			
			tableData: []
		}
	},
	created(){
		 if (this.$route.query.method === 'update'){
			 getTemplateInfo({
				 template_id: this.$route.query.id
			 }).then(res =>{
				 this.form = res.data
			 })
		 }
	},	 
	methods:{
		getData(){
			this.params.template_id = this.$route.query.id || 0
			this.tableLoading = false
			getTemplateGoods(this.params).then(res =>{
				 this.tableData = res.data.list
				 this.all_data_num = res.data.all_data_num
				 
				 setTimeout(()=>{
					this.tableLoading = false 
				 },500)
			})
		},
		back() {
		  this.$confirm('是否放弃保存当前模板信息？', '提示', {
		    confirmButtonText: '确定',
		    cancelButtonText: '取消',
		    type: 'warning'
		  }).then(() => {
			this.$router.push({path: '/example/tree'})	
		    this.$message({
		      type: 'success',
		      message: '已放弃保存!'
		    });
		  }).catch(() => {
		    this.$message({
		      type: 'info',
		      message: '已取消保存'
		    });          
		  });
		},
		baocun() {
			this.$refs.form.validate((valid) => {
				if(valid){
				this.$confirm('当前修改后的数据将无法找回，你还要继续吗？', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  let params = Object.assign({}, this.form)
				  params['status'] = this.$route.query.method
				  
				  params['template_goods'] = [].concat(this.tableData)					
				  saveTemplate(params).then(res => {
					console.log(res)
					this.$router.push({path: '/example/tree'})
					this.$message({
					  type: 'success',
					  message: '保存成功!'
					});
				  });	  
				}).catch(() => {
					this.$message({
					  type: 'info',
					  message: '已取消保存'
					});          
				  });
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.page{
		margin: 10px;
		
		.header{
			
		    h2{
			   	text-align: center;
				margin: 0;
			}
		}
		
		.input-with-select {
			/deep/ .el-input-group__prepend{
				width: 40%;
			}	
		}
		
		.info{
			background-color: #E4E7ED;
			height: 3rem;
			line-height: 3rem;
			text-align: center;
			color: #606266;
			
			div{
				display: inline-block;
			}
		}
		
		footer{
			text-align: right;
			margin-top: 10px;
		}
	}
	.submit-bar{
		background-color: white;
		position: fixed;
		bottom: 0;
		z-index: 100;
		width: 100%;
		height: 70px;
		left: 100px;
		padding: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
